<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>注册</title>
		<!--引入bootstrap样式文件--->
		<link rel="stylesheet" type="text/css" href="js/bootstrap-3.3.7-dist/css/bootstrap.min.css" />
		<link rel="stylesheet" type="text/css" href="js/bootstrap-3.3.7-dist/css/bootstrap-theme.min.css" />
		<link rel="stylesheet" media="screen" href="js/bootstrap-datetimepicker-master/css/bootstrap-datetimepicker.min.css" />
		<!--引入jquery-->
		<script type="text/javascript" src="js/HomePageJs/iquery-1.12.4/jquery-1.12.4.min.js"></script>
		<!--引入layer-->
		<script type="text/javascript" src="js/HomePageJs/layer-v3.1.1/layer/layer.js"></script>
		<!--引入bootstrap脚本--->
		<script type="text/javascript" src="js/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
		<script type="text/javascript" src="js/bootstrap-datetimepicker-master/js/bootstrap-datetimepicker.js" charset="UTF-8"></script>
		<script type="text/javascript" src="js/bootstrap-datetimepicker-master/js/locales/bootstrap-datetimepicker.fr.js" charset="UTF-8"></script>
		<link rel="stylesheet" href="css/HomePageCss/cool.css" />
		<link rel="stylesheet" href="css/registe.css" />
		<script type="text/javascript">
			// 验证form表单是否合法
			function checkMe() {
				// 错误提示信息
				var strMsg = "";
				// 用户名验证
				var username = document.getElementById("username").value;
				if(username == null || username == "") {
					// 增加提示信息
					strMsg += "请输入用户名!<br>";
				}
				// 密码验证
				var userpsw = document.getElementById("userpsw").value;
				if(userpsw == null || userpsw == "") {
					// 增加提示信息
					strMsg += "请输入密码!<br>";
				}
				var userpsw2 = document.getElementById("userpsw2").value;
				if(userpsw != userpsw2) {
					// 增加提示信息
					strMsg += "两次密码不一致！";
				}
				// 性别单选框验证
				// 获取所有的单选框对象
				// 获取的是存储多个单选对象的数组
				var radioSexs = document.getElementsByName("usersex");
				var isCheckedSex = false; // 默认没有选择
				// 循环遍历来确定是否进行了选择【循环肯定或循环否定法】
				if(radioSexs != null && radioSexs.length > 0) {
					for(var i = 0; i < radioSexs.length; i++) {
						// 有选择的选项，则修改标识变量
						if(radioSexs[i].checked) {
							isCheckedSex = true;
							// 终止
							break;
						}
					}
				}
				// 判定是否选择了性别
				if(isCheckedSex == false) {
					// 没有选择性别，提示
					// 增加提示信息
					strMsg += "请选择性别!<br>";
				}
				// 居住地验证
				var userlocation = document.getElementById("userlocation").value;
				if(userlocation == null || userlocation == "") {
					// 增加提示信息
					strMsg += "请输入居住地 !<br>";
				}
				// 手机号验证
				var usertel = document.getElementById("usertel").value;
				if(usertel == null || usertel == "") {
					// 增加提示信息
					strMsg += "请输入手机号!<br>";
				}
				//验证码验证
				var yzm = document.getElementById("yzm").value;
				var yzm2 = document.getElementById("yzm2").value;
				if(yzm == null || yzm == "" || yzm != yzm2) {
					// 增加提示信息
					strMsg += "请输入正确的验证码!";
				}
				// 判定整个表单是否可以进行提交
				if(strMsg == "") {
					// 验证通过
					return true;
				} else {
					// 验证不通过
					layer.open({
						title: '提示',
						content: strMsg
					});
					return false;
				}
			}
			// 手动提交form表单
			function doSubmit() {
				document.getElementById("form0").submit();
			}
		</script>
	</head>

	<body id="rbody">
		<!--第二行不是那么黑的框框-->
		<div id="search" class="searchSytle text-center pinned">
			<ul>
				<!--链接到人家官网的各种-->
				<li>
					<a href="https://s.lenovo.com.cn/index.html?destination=3&key=%E6%89%8B%E6%9C%BA" target="_blank">
						全部商品
					</a>
				</li>
				<li>
					<a href="https://s.lenovo.com.cn/?key=%E8%81%94%E6%83%B3%E6%89%8B%E6%9C%BA" target="_blank">
						联想手机</a>
				</li>
				<li>
					<a href="https://www.motorola.com.cn/store/list/133.html" target="_blank">
						moto手机</a>
				</li>
				<li>
					<a href="https://s.lenovo.com.cn/?key=%E6%89%8B%E6%9C%BA&destination=3&index=889-891" target="_blank">
						智能配件</a>
				</li>
				<li>
					<a href="https://shop.lenovo.com.cn/zcode/index.html" target="_blank">
						Z码通道</a>
				</li>

			</ul>
		</div>

		<!--左上角的联想图标-->
		<div class="logo pinned">
			<a href="//www.lenovo.com.cn">
				<img src="img/HomePageImg/Lenovo.jpg" />
			</a>
		</div>

		<!--注册表单-->
		<div id="registe">
			<h2 align="center">注册联想会员</h2>
			<br />
			<form class="form-horizontal" action="account.html" method="get" id="form0">
				<!-- 约定：表达的name属性值和数据库的字段名保持一致【大小写敏感】 -->
				<div class="form-group">
					<label class="col-sm-2 control-label col-sm-offset-3">用户名</label>
					<div class="col-sm-3">
						<input type="text" class="form-control" id="username" name="username" placeholder="请输入用户名">
					</div>
				</div>
				<div class="form-group">
					<label class="col-sm-2 control-label col-sm-offset-3">密码</label>
					<div class="col-sm-3">
						<input type="password" class="form-control" id="userpsw" name="userpsw" placeholder="请输入密码">
					</div>
				</div>
				<div class="form-group">
					<label class="col-sm-2 control-label col-sm-offset-3">确认密码</label>
					<div class="col-sm-3">
						<input type="password" class="form-control" id="userpsw2" name="userpsw2" placeholder="请再次输入密码">
					</div>
				</div>
				<div class="form-group">
					<label class="col-sm-2 control-label col-sm-offset-3">性别</label>
					<div class="col-sm-3">
						<input type="radio" id="male" name="usersex" />男 <input type="radio" id="female" name="usersex" style="margin-left: 60px" />女
					</div>
				</div>
				<div class="form-group">
					<label class="col-sm-2 control-label col-sm-offset-3">居住地</label>
					<div class="col-sm-3">
						<input type="text" class="form-control" id="userlocation" name="userlocation" placeholder="请输入居住地">
					</div>
				</div>
				<div class="form-group">
					<label class="col-sm-2 control-label col-sm-offset-3">手机号</label>
					<div class="col-sm-3">
						<input type="text" class="form-control" id="usertel" name="usertel" placeholder="请输入手机号">
					</div>
				</div>
				<div align="center">
					<button type="button" class="btn" id="获取验证码" onclick="#" class="col-sm-offset-1">获取验证码</button>
					<div class="col-sm-3 col-sm-offset-5">
						<input type="text" class="form-control" id="yzm" name="yzm" placeholder="请输入验证码">
						<input type="hidden" id="yzm2" name="yzm2" />
					</div>
				</div>
				<br />
				<div class="form-group">
					<div align="center">
						<button type="submit" class="btn" id="注册按钮" onclick="return checkMe()">立即注册</button>
					</div>
				</div>
			</form>
		</div>

	</body>
	<script>
		function doAjaxSMS() {
			if($("#usertel").val() != "") {
				$.ajax({
					type: "POST", // 请求类型
					url: "../Sms", // 请求的url
					data: "usertel=" + $("#usertel").val(), // 发送的数据 使用serialize方法替代手动拼写数据串
					// 			dataType : "json",
					success: function(data, textStatus, jqXHR) { // 执行成功之后的回调函数
						// 回调函数的dom操作
						alert("验证码为" + data);
						document.getElementById("yzm2").value = data;
					},
					error: function(data) {
						alert("请求失败" + data);
					}
				});
			}
		}
	</script>

</html>